<template>
  <div id="app">
    <!-- 页面布局和导航 2018/3/7 11:44 zhangQ -->
    <!--<div class="layout">-->

    <!--<Layout>-->
    <!--<Header>-->
    <!--<Menu mode="horizontal" theme="dark" active-name="generationPage" @on-select="menuItemSelect" style="height: 25px">-->
    <!--&lt;!&ndash;<MenuItem name="generationPage">生成</MenuItem>&ndash;&gt;-->
    <!--<MenuItem name="pageSingle">单表生成</MenuItem>-->
    <!--&lt;!&ndash;<MenuItem name="dataBaseConf">数据库管理</MenuItem>&ndash;&gt;-->
    <!--&lt;!&ndash;<MenuItem name="dataBaseConf">模板管理</MenuItem>&ndash;&gt;-->
    <!--</Menu>-->
    <!--</Header>-->
    <!--&lt;!&ndash;<Content :style="{padding: '20px 16px 16px'}">&ndash;&gt;-->
    <!--&lt;!&ndash;&lt;!&ndash;<Breadcrumb :style="{margin: '16px 0'}">&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;&lt;!&ndash;<BreadcrumbItem>Home</BreadcrumbItem>&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;&lt;!&ndash;<BreadcrumbItem>Components</BreadcrumbItem>&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;&lt;!&ndash;<BreadcrumbItem>Layout</BreadcrumbItem>&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;&lt;!&ndash;</Breadcrumb>&ndash;&gt;&ndash;&gt;-->
    <!--&lt;!&ndash;<Card>&ndash;&gt;-->
    <!--&lt;!&ndash;<div :style="{height:contentHeight+'px'}" style="overflow-y: auto;overflow-x:hidden" id="cardLayout">&ndash;&gt;-->
    <!--&lt;!&ndash;<router-view/>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</Card>&ndash;&gt;-->
    <!--&lt;!&ndash;</Content>&ndash;&gt;-->
    <!--</Layout>-->
    <!--</div>-->

    <div class="layout">
      <Layout>
        <Sider hide-trigger collapsible :collapsed-width="2" width="120" v-model="isCollapsed">
          <!--<Sider collapsible :collapsed-width="10" v-model="isCollapsed">-->
          <div @click="isCollapsed = !isCollapsed" class="leftBtn">
            <Icon type="arrow-graph-up-right" v-show="isCollapsed"></Icon>
            <Icon type="arrow-graph-down-left" v-show="!isCollapsed"></Icon>
            <!--<Icon type="arrow-right-b"></Icon>-->
          </div>
          <div style="margin: 20px 30px;">
            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
          </div>
          <Menu active-name="1-2" theme="dark" width="auto" v-show="!isCollapsed"
              :style="{height:contentHeight-30+'px'}" class="menuClass" @on-select="menuItemSelect">
            <MenuItem name="pageSingle">单表生成</MenuItem>
            <MenuItem name="dbConfig">数据库管理</MenuItem>
            <MenuItem name="batchTable">批量生成</MenuItem>
            <MenuItem name="test">测试</MenuItem>
          </Menu>
        </Sider>
        <Layout>
          <!--<Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
          <Content :style="{padding: '10px 13px 13px'}">
            <Card>
              <div :style="{height:contentHeight+'px'}" style="overflow-y: auto;overflow-x:hidden" id="cardLayout">
                <router-view/>
              </div>
            </Card>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
  import hw from '@/components/common/heightAndWidth'

  export default {
    name: 'generation-code',
    data () {
      let currentName = ''
      let contentHeight = 500
      let isCollapsed = false
      let datas = { currentName, contentHeight, isCollapsed }
      return datas
    },
    computed: {},
    methods: {
      menuItemSelect (name) {
        this.$router.push({ name: name })
      }
    },
    created () {
    },
    mounted () {
      setTimeout(() => {
        hw.setFullHeightAllWith('cardLayout', 45, (height) => {
          this.contentHeight = height
        })
      }, 200)
    },
    components: {}
  }
</script>

<style scoped>
  /* CSS */
  /*.layout {*/
  /*border: 1px solid #d7dde4;*/
  /*background: #f5f7f9;*/
  /*position: relative;*/
  /*!*border-radius: 4px;*!*/
  /*overflow: hidden;*/
  /*}*/

  /*.layout-header-bar {*/
  /*background: #fff;*/
  /*box-shadow: 0 1px 1px rgba(0, 0, 0, .1);*/
  /*}*/

  .leftBtn {
    font-size: 48px;
    position: absolute;
    z-index: 1000;
    right: -12px;
    top: 5%;
    transform: translateY(-5%);
    /*background-color: #495060;*/
    width: 10px;
    /*padding: 10px 5px;*/
  }

  .menuClass {
    overflow-y: hidden;
    overflow-x: hidden;
  }
</style>
